<template>
  <!-- 这里可以是空的，因为主要逻辑在 script 中 -->
</template>

<script>
export default {
  data() {
    return {
      customerFollowList: [],
      offsetTop: 20, // 初始偏移量，单位像素
      currentOffset: 20, // 当前的偏移量
      notificationIds: [] // 存储通知的 ID
    };
  },
  methods: {
    async customerFollow() {
      const { data: res } = await this.$http.get("/customer/CustomerFollow/findCustomerFollow");
      if (!res.success) {
        return this.$message.error("获取客户提醒信息失败:" + res.data.errorMsg);
      }
      this.customerFollowList = res.data;
      // 循环遍历提醒信息并输出通知
      for (const item of this.customerFollowList) {
        const customerName = item.resourceName || '未知客户';
        const followContent = item.followContent || '无跟进内容';
        const remark = item.remark ? ` 备注：${item.remark}` : '';

        const notification = this.$notify({
          title: customerName,
          message: `${followContent}${remark}`,
          duration: 0,
          offset: this.currentOffset, // 设置通知的垂直偏移量
          position: 'top-right', // 设置通知显示位置为右上角
          customClass: 'custom-notification' // 自定义 CSS 类
        });

        this.notificationIds.push(notification.id); // 存储通知的 ID

        // 使用 $nextTick 确保 DOM 已经更新，然后获取通知框的实际高度
        await this.$nextTick();
        const notificationElement = document.querySelector('.el-notification.top-right:last-child');
        if (notificationElement) {
          const height = notificationElement.offsetHeight;
          this.currentOffset += height; // 加上 10px 的间隔
        }
      }
      this.$emit('customerFollow');
    },
    clearNotifications() {
      this.notificationIds.forEach(id => {
        this.$notify.closeAll();
      });
      this.notificationIds = [];
      this.currentOffset = this.offsetTop;
    }
  },
  created() {
    this.customerFollow();
  },
  mounted() {
  },
};
</script>

<style>
/* 自定义通知样式，设置文字与边框的间距 */
.custom-notification .el-notification__title,
.custom-notification .el-notification__content {
  padding: 5px;
  /* 允许文本换行 */
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
}
</style>